﻿
<!DOCTYPE html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>壁纸之家登录界面</title>
<link href="${pageContext.request.contextPath}/css/bootstrap.css"
	rel="stylesheet">
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/htmleaf-demo.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/animate.min.css" />

<style type="text/css">
.form-bg {
	padding: 2em 0;
}

.form-horizontal {
	background: #fff;
	padding-bottom: 40px;
	border-radius: 15px;
	text-align: center;
}

.form-horizontal .heading {
	display: block;
	font-size: 35px;
	font-weight: 700px;
	padding: 35px 0;
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 30px;
}

.form-horizontal .form-group {
	padding: 0 40px;
	margin: 0 0 25px 0;
	position: relative;
}

.form-horizontal .form-control {
	background: #f0f0f0;
	border: none;
	border-radius: 20px;
	box-shadow: none;
	padding: 0 20px 0 45px;
	height: 40px;
	transition: all 0.3s ease 0s;
}

.form-horizontal .btn {
	float: right;
	font-size: 14px;
	color: #fff;
	background: #00b4ef;
	border-radius: 30px;
	padding: 10px 25px;
	border: none;
	text-transform: capitalize;
	transition: all 0.5s ease 0s;
}

/*界面动画*/
.form-horizontal {
	top: 50px;
	opacity: 0
}

.verify {
	width: 60%;
}

.createcode {
	float: right;
	margin-top: -35px;
	width: 100px;
	height: 30px;
	border-radius: 20px;
	background-image:
		url("${pageContext.request.contextPath}/images/code.jpg");
	font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
		'New York', serif;
	font-style: oblique;
	letter-spacing: 6px;
	border: none;
}

.regit:hover {
	text-decoration: none;
	color: orange;
}

.regit {
	top: 20px;
	float: right;
}

.form-bg {
	background-image:
		url("${pageContext.request.contextPath}/images/bo.jpg");
	height: 110%;
}
</style>

</head>
<body>
	<script>
    	
    $(function(){
		$(".form-horizontal").addClass('animated bounceInDown');
		$(".form-horizontal").animate({opacity:1},500);
		createCode();
	     });
	     
		    	function login(){
		    	//校验验证码 
					var inputCode = document.getElementById("vercode").value.toUpperCase(); //取得输入的验证码并转化为大写 
						if(inputCode.length <= 0) { //若输入的验证码长度为0 
						 //则弹出请输入验证码 
						$("#error").empty();
						var e="请输入验证码！";
						$("#error").append(e);
						} 
						else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时 
						 //则弹出验证码输入错误 
						$("#error").empty();
						var e="验证码输入错误！";
						$("#error").append(e);
						
						createCode();//刷新验证码 
						document.getElementById("vercode").value = "";//清空文本框 
						} 
						else { //输入正确时 
		    		var name=$("#username").val();
					var pass=$("#password").val();
						
						if(name==""){
							$("#error").empty();
							var e="账号不能为空！";
							$("#error").append(e);
							return false;
						}
						if(pass==""){
							$("#error").empty();
							var e="密码不能为空！";
							$("#error").append(e);
							return false;
						}
					
					if(name=="admin" && pass=="admin"){
	
						$.ajax({
			    			url:"${pageContext.request.contextPath}/system/user/login",
			    			type:"post",
		    			data:{
		    					"username":name,
		    					"password":pass
		    					},
		    			dataType:"json",
		    			success:function(data){
		    	
		    					window.location.href="${pageContext.request.contextPath}/system/user/toindex2";	
		    			},
		    			error:function(){
		    				$("#error").empty();
							var e="账号或密码输入错误！！！";
							$("#error").append(e);
		    			}
		    		});
					}else{
						$.ajax({
		    			url:"${pageContext.request.contextPath}/system/user/login",
		    			type:"post",
		    			data:{
		    					"username":name,
		    					"password":pass
		    					},
		    			dataType:"json",
		    			success:function(data){
		    				window.location.href="${pageContext.request.contextPath}/system/news/getindex";			
		    			},
		    			error:function(data){
		    				alert(data.length);
		    				$("#error").empty();
							var e="账号或密码输入错误！！！";
							$("#error").append(e);
		    			}
		    		});
					}
						} 
						
		    	}
    	
	function createCode(){ 
		code = ""; 
		var codeLength = 4;//验证码的长度 
		var checkCode = document.getElementById("code");
		var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 
		'S','T','U','V','W','X','Y','Z');//随机数 
		for(var i = 0; i < codeLength; i++) {//循环操作 
			var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35） 
			code += random[index];//根据索引取得随机数加到code上 
		} 
		checkCode.value = code;//把code值赋给验证码 
		}
    	
    </script>

	<div class="htmleaf-container">

		<header class="htmleaf-header">
			<h1>壁纸之家</h1>

		</header>

		<div class="demo form-bg">
			<div class="container">
				<div class="row">
					<div class="col-md-offset-3 col-md-6">
						<div class="form-horizontal">
							<span class="heading">用户登录</span>
							<div class="form-group ">
								<div id="error" style="color: red;"></div>
							</div>
							<div class="form-group">
								<span class="glyphicon glyphicon-user"
									style="left:55px; top:13px; position: absolute;"></span> <input
									type="text" class="form-control" id="username" placeholder="账号">

							</div>
							<div class="form-group">
								<span class="glyphicon glyphicon-eye-close"
									style="left:55px; top:13px; position: absolute;"></span> <input
									type="password" class="form-control" id="password"
									placeholder="密码">
							</div>
							<div class="form-group">
								<input type="text" class="form-control verify" id="vercode"
									placeholder="验证码" /> <input type="button" class="createcode "
									id="code" onclick="createCode()" />
							</div>

							<div class="form-group lo">
								<button type="button" class="btn btn-primary btn-lg btn-block"
									onclick="login()">立刻登录</button>
								<a class="regit"
									href="${pageContext.request.contextPath}/html/adduser2.html">立即注册</a>
							</div>

							<div style="font-size: 12px;">
								<h5>体验用户账号111
									密码111&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;管理员账号admin 密码admin</h5>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>

</body>
</html>

